@extends('layouts.vue')

@section('content')
    <b-navbar toggleable="lg" type="light" variant="light" fixed="top" class="shadow-sm">
        <div class="container">
            <b-navbar-brand to="/">{{ config('app.name', 'Laravel') }}</b-navbar-brand>

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>
{{--                <b-navbar-nav>--}}
{{--                    <b-nav-item href="#">Link</b-nav-item>--}}
{{--                    <b-nav-item href="#" disabled>Disabled</b-nav-item>--}}
{{--                </b-navbar-nav>--}}

                <!-- Right aligned nav items -->
                <b-navbar-nav class="ml-auto">
{{--                    <b-nav-form>--}}
{{--                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>--}}
{{--                        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>--}}
{{--                    </b-nav-form>--}}


                    <b-nav-item-dropdown right>
                        <!-- Using 'button-content' slot -->
                        <template v-slot:button-content>
                            {{ Auth::user()->name }} <span class="caret">
                                        @if(Auth::user()->avatar)
                                    <img src="{{ Auth::user()->avatar }}" tag="avatar" class="rounded-circle avatar img-fluid" >
                            @endif
                        </template>
                        <b-dropdown-item to="/profile">Profile</b-dropdown-item>
                        <b-dropdown-item href="{{ route('logout') }}">{{ __('Logout') }}</b-dropdown-item>
                    </b-nav-item-dropdown>
                </b-navbar-nav>
            </b-collapse>
        </div>
    </b-navbar>
    <transition name="slide-fade">
        <router-view></router-view>
    </transition>
@endsection
